import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Header, Content, List, ListItem, Text, Left, Right, Icon } from 'native-base';

import HeaderComp from '../components/HeaderComp';
export default class NativeBase extends Component {
  render() {
    const { navigation } = this.props;
    return (
      <Container>
        <HeaderComp title={'组件展示'} />
        <Content>
          <List>
            <ListItem selected onPress={() => navigation.navigate('Accordion')}>
              <Left>
                <Text>Accordion折叠手风琴</Text>
              </Left>
              <Right>
                <Icon name='arrow-forward' />
              </Right>
            </ListItem>
            <ListItem onPress={() => navigation.navigate('ActionSheet')}>
              <Left>
                <Text>ActionSheet底部弹窗 (Android only)</Text>
              </Left>
              <Right>
                <Icon name='arrow-forward' />
              </Right>
            </ListItem>
            <ListItem onPress={() => navigation.navigate('Button')}>
              <Left>
                <Text>Button</Text>
              </Left>
              <Right>
                <Icon name='arrow-forward' />
              </Right>
            </ListItem>
            <ListItem onPress={() => navigation.navigate('Card')}>
              <Left>
                <Text>Card</Text>
              </Left>
              <Right>
                <Icon name='arrow-forward' />
              </Right>
            </ListItem>
            <ListItem onPress={() => navigation.navigate('CheckBox')}>
              <Left>
                <Text>Check Box</Text>
              </Left>
              <Right>
                <Icon name='arrow-forward' />
              </Right>
            </ListItem>
            <ListItem onPress={() => navigation.navigate('DeckSwiper')}>
              <Left>
                <Text>Deck Swiper</Text>
              </Left>
              <Right>
                <Icon name='arrow-forward' />
              </Right>
            </ListItem>
            <ListItem onPress={() => navigation.navigate('SwipeableList')}>
              <Left>
                <Text>Swipeable List (removed)</Text>
              </Left>
              <Right>
                <Icon name='arrow-forward' />
              </Right>
            </ListItem>
          </List>
        </Content>
      </Container>
    );
  }
}
